@(title: String)(message: String)

@main(title){
@views.html.header.header("Carpool overview"){
@views.html.header.bttn.home_left()
@views.html.header.bttn.options_menu_right()
}
}{
<script src='@routes.Assets.at("javascripts/carpool/carpool_overview.js")' type="text/javascript"></script>
@Html(message)

<a href="@{routes.GroupActions.createGroupForm()}" data-role="button" data-icon="plus" data-iconpos="right" data-mini="true">Create a group</a>
<a href="@{routes.GroupActions.joinGroupForm()}" data-role="button" data-icon="plus" data-iconpos="right" data-mini="true">Join a group</a>


<table data-role="table" id="groups_table" data-mode="none" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th>ID</th>
            <th style="width:50%">Name</th>
            <th>Modify</th>
            <th>Leave</th>
        </tr>
    </thead>
    <tbody id="groups_table_body">

    </tbody>


</table>

<div data-role="popup" id="group_popup" style="padding: 15px;">
    @views.html.carpool.group_detail()
</div>

}{
}
